<style lang="less" rel="stylesheet/less" scoped>
.recommended {
  width: 100%;
  overflow: hidden;
  padding-bottom: 1rem;
  font-size: 0.26rem;
}
// 书籍样式
.books {
  width: 33.33vw;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;

  img {
    width: 25vw;
    height: 20vmax;
  }
  i {
    position: absolute;
    right: 0.4rem;
    bottom: 0.6rem;
    font-size: 0.4rem;
    color: aqua;
  }
  span {
    width: 25vw;
    font-size: 0.26rem;
    white-space: nowrap;
    line-height: 0.6rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
// 头部轮播图
.header-swiper {
  width: 100%;
  height: 23vmax;
}
// 搜索
.search-box {
  width: 100vw;
  height: 0.9rem;
  padding: 0.05rem 0.1rem;
  .get-camera {
    box-sizing: border-box;
    width: 15vw;
    padding: 0.1rem;
  }
  .search-text {
    box-sizing: border-box;
    height: 0.78rem;
    width: 85vw;
    border: 1px solid #000;
    padding-right: 0.2rem;
    .search-img {
      height: 0.76rem;
      padding: 0 0.15rem;
    }
    .search {
      width: 100%;
      text-indent: 0.1rem;
      font-size: 0.28rem;
      line-height: 0.78rem;
    }
  }
}
// 活动
.activity {
  width: 100vw;
  li {
    img {
      display: block;
      width: 100%;
      height: 1.5rem;
    }
  }
}
// 热门
.bestseller {
  border: 1px solid #bbbbbb;
  p {
    text-indent: 0.2rem;
    line-height: 0.46rem;
  }
  .bestseller-swiper {
    width: 100%;
    height: 25vmax;
  }
}
// 分类标签
.classification-nav {
  padding: 0 0.2rem;
  line-height: 0.6rem;
  border-bottom: 1px solid #bbbbbb;
  align-items: baseline;
  span {
    font-size: 0.4rem;
  }
}
// 分类书籍
.classification {
  width: 100vw;
  .books {
    padding-top: 0.2rem;
    float: left;
  }
}
// loading...
.footer {
  background-color: aqua;
  font-size: 0.5rem;
  line-height: 1rem;
  text-align: center;
}
</style>
<template>
    <div class="recommended">
    <!-- 头部 -->
        <swiper :options="headerSwiper" class="header-swiper">
            <swiper-slide v-for="(item,index) in headerImg" :key="index">
                <img :src="item.url" class="swiper-slide" :alt="item.alt">
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    <!-- 搜索 -->
        <div class="box-left search-box">
            <img src="../assets/img/sys.png" alt="扫一扫" class="get-camera">
            <div class="box-left search-text">
                <img src="../assets/img/search.png" alt="搜索" class="search-img">
                <input type="text" placeholder="书名、作者、ISBN号" readonly v-model="searchInfo" @click="pathTo('search')" class="search">
            </div>
        </div>
    <!-- 活动 -->
        <ul class="activity" v-for="(item,index) in activityImg" :key="index">
            <li><img :src="item.url" class="swiper-slide" :alt="item.alt"></li>
        </ul>
    <!-- 热门 -->
        <div class="bestseller">
            <p>热门书籍</p>
            <swiper :options="bestsellerSwiper" class="bestseller-swiper">
                <swiper-slide v-for="(item,index) in bestsellerImg" :key="index">
                    <div class="books" @click="pathTo('book')">
                        <img :src="item.url" class="swiper-slide" :alt="item.name">
                        <i>{{ index }}.8</i>
                        <span>{{ item.alt }}</span>
                    </div>
                </swiper-slide>
            </swiper>
        </div>
    <!-- 分类标签 -->
        <div class="box-between classification-nav">
            <ul v-for="(item,index) in nav" :key="index" class="box-between">
                <li>{{item}}</li>
            </ul>
            <span @click="pathTo('Lable')">+</span>
        </div>
    <!-- 分类书籍 -->
        <div class="classification clearfix">
            <ul v-for="(item,index) in classificationImg" :key="index">
                <li class="books" @click="pathTo('book')">
                    <img :src="item.url" class="swiper-slide" :alt="item.alt">
                    <i>{{ index }}.8</i>
                    <span>{{ item.alt }}</span>
                </li>
            </ul>
        </div>
    <!-- 页脚 -->
        <div class="footer" v-show="">{{footerMsg}}</div>    
    
    </div>
</template>

<script>
import b1 from "../assets/img/b1.jpeg";
import b2 from "../assets/img/b2.jpeg";
import b3 from "../assets/img/b3.jpeg";
import b4 from "../assets/img/b4.jpeg";

import i1 from "../assets/img/i1.jpeg";
import i2 from "../assets/img/i2.jpeg";

import p1 from "../assets/img/p1.jpg";
import p2 from "../assets/img/p2.jpg";
import p3 from "../assets/img/p3.jpg";
import p4 from "../assets/img/p4.jpg";
export default {
  name: "",
  //数据
  data() {
    return {
      headerImg: [
        { url: b1, alt: "书籍图片" },
        { url: b2, alt: "书籍图片" },
        { url: b3, alt: "书籍图片" },
        { url: b4, alt: "书籍图片" }
      ],
      activityImg: [{ url: i1, alt: "书籍图片" }, { url: i2, alt: "书籍图片" }],
      bestsellerImg: [
        { url: p1, alt: "刺杀骑士团长" },
        { url: p2, alt: "雨" },
        { url: p3, alt: "橘子不是唯一的水果" },
        { url: p4, alt: "该我开枪了" },
        { url: p1, alt: "刺杀骑士团长" },
        { url: p2, alt: "雨" }
      ],
      classificationImg: [
        { url: p1, alt: "刺杀骑士团长" },
        { url: p2, alt: "雨" },
        { url: p3, alt: "橘子不是唯一的水果" },
        { url: p4, alt: "该我开枪了" },
        { url: p1, alt: "刺杀骑士团长" },
        { url: p2, alt: "雨" },
        { url: p3, alt: "橘子不是唯一的水果" },
        { url: p4, alt: "该我开枪了" },
        { url: p1, alt: "刺杀骑士团长" }
      ],
      headerSwiper: {
        initialSlide: 0,
        loop: true,
        autoplay: true,
        delay: 2000,
        speed: 500,
        pagination: {
          el: ".swiper-pagination",
          bulletElement: "li"
        }
      },
      bestsellerSwiper: {
        initialSlide: 0,
        slidesPerView: 3.5,
        slidesPerGroup: 3,
        speed: 400
      },
      nav: ["全部", "教育", "文学", "生活", "儿童", "百科", "育儿"],

      searchInfo: "",
      footerMsg: "正在加载···",
      API: {
        hotBook: { //热门书籍
          url: "r=book/get-hot-list",
          pageNum: 1,
          pageSize: 20
        },
        bookList: { //书籍列表
          url: "r=book/info",
          id: 1
        },
        categories: {
            url: "r=book/get-categories",
        }
      }
    };
  },
  //计算属性
  computed: {
    // ...mapState({
    //     show: state => state.items.show,
    //     flag: state => state.items.flag,
    // })
  },
  //组件
  components: {},
  //初始化数据
  mounted() {
    document.title = "推荐";
    this.getHotBook();
    this.getBookList();
    this.getCategories();
  },
  //方法
  methods: {
    pathTo(num) {
      switch (num) {
        case "search":
          this.$router.push({ name: "Search" });
          break;
        case "Lable":
          this.$router.push({ name: "Lable" });
          break;
        case "book":
          this.$router.push({ name: "BookInfo" });
          break;
      }
    },
    // 热门图书
    getHotBook() {
      this.$http
        .get(API_DOMAIN + this.API.hotBook.url + "&pageNum=" + this.API.hotBook.pageNum + "&pageSize=20") 
        .then(res => {
          console.log("热门书籍",res.data.list);
        //   this.bestsellerImg = res.data.list;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 分类标签
    getCategories(){
        this.$http
            .get(API_DOMAIN + this.API.categories.url) 
            .then(res => {
            console.log("分类",res);
            //   this.bestsellerImg = res.data.list;
            })
            .catch(err => {
            console.log(err);
        });
    },
    
    // 书籍列表
    getBookList() {
      this.$http
        .get(API_DOMAIN + this.API.bookList.url + "&id=" + this.API.bookList.id)
        .then(res => {
          console.log("书籍列表",res);
        })
        .catch(err => {
          console.log(err);
        });
    },
  },
  //监听数据变化
  watch: {
    $route(to, from) {}
  }
};
</script>
